<template>
	<view>
		<view :style="mainStyle">
			<view class="gui-margin-top header-article gui-flex gui-align-items-center gui-bg-white">
				<view class="gui-margin-x">专题名称</view>
				<view class="gui-margin-x gui-text gui-color-gray">
					查看更多
				    <text class="gui-icons">&#xe601;</text>
				</view>
			</view>

		<view class="" style="width: 100%;margin: 40rpx 0;">
			<view class="content gui-border-b" v-for="(item,index) in data.imageList"  @click="showActive(item)">
				<view class="contentItem gui-flex gui-border-b gui-bg-white">
					<view class="contentText">
						<view class="title gui-margin-x gui-margin-top">
							{{item.text}}
						</view>
						<view class="gui-flex read gui-text gui-color-gray gui-align-items-center">
							<view class="gui-margin-x">柳钢集团</view>
							<view class="gui-margin-x">
								<!-- <text class="gui-icons">&#xe6ea; </text> -->
								<text style="margin: 0 10rpx;">125 次浏览</text>
							</view>
						</view>
					</view>
					<view class="contentImg gui-flex gui-align-items-center gui-justify-content-center">
						<view>
							<image :src="item.src" style="" class="imgs"></image>
							<!-- <view class="gui-text label" style="">
								<text class="gui-color-red" style="margin: 0 5rpx;">#</text> 笔记标签
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
			
		</view>
	</view>
</template>
<script>
export default{
	name  : "notice",
	props : {
		width        : {type:Number, default:0},
		text         : {type:String, default:''},
		size         : {type:Number, default:26},
		lineHeight   : {type:Number, default:1.8},
		padding      : {type:Number, default:15},
		margin       : {type:Number, default:15},
		customClass      : {type:Array,  default:function(){
			return ['gui-bg-primary', 'gui-color-white'];
		}},
		borderRadius : {type:Number, default:6},
		data         : {type:Object, default:function(){return [];}},
		borderColor  : {type:String, default:'rgba(255,255,255,0)'},
		backColor  : {type:String, default:'rgba(255,255,255,0)'}
	},
	data() {
		return {
			tapping : false,
			mainStyle:this.$comm.getCss(this.datas)
		}
	},
	
	created() {
		console.log("article",this.data)
	},
	
	methods:{
		tapme : function(){
			this.$emit('tapme', this.data);
		},
		showActive(d){
			console.log("ddddddddd",d)
		}
	},
	emits : ['tapme']
}
</script>
<style scoped>
.header-article{
	height:80rpx;
	width: 100%;
	justify-content: space-between;
}
.content{
	height: 250rpx;
	width: 100%;
}
.contentItem{
	position: relative;
	height: 250rpx;
	width: 100%;
}
.title{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.contentText{
	height: 100%;
	width: 60%;
}
.contentImg{
	height: 100%;
	width:40%;
}
.read{
	flex-direction: row;
	position: absolute;
	bottom: 20rpx;
}
.label{
	position: absolute;
	bottom: 40rpx;
	background-color: white;
	opacity: 0.8;
	margin: 0 5rpx;
}
.imgs{
	width: 200rpx;
	height: 200rpx;
	position: relative;
}
</style>